<template>
    <a-spin :spinning="loadingState"> 
        <div class="retention" id="retention" ref="retention-table">
            <Table
                row-key="id" 
                ref="table" 
                :columns="columns"
                :width="tableWidth"
                :height="tableHeight" 
                :data="tableVal" 
                :load-data="loadChildrenData"
            >
            </Table>
        </div>
    </a-spin>
</template>

<script>
import 'view-design/dist/styles/iview.css';
import { mapActions } from 'vuex';
import elementResize from '@/views/reportForms/show_report/elementResize'
export default {
    data () {
        return {
            tableWidth: 300,
            tableHeight: 300,
            resData: [],
            tableVal: [],
            columns: [],
            timeUnitSign: "天",
            config: null
        }
    },
    watch: {},
    props: {
        item: Object,
        dataApkdb: Object,
        rowHeight: Number,
        loadingState: Boolean
    },
    methods: {
        ...mapActions('custom', ['getUpdateReportDs']),
        dataconfig () {
            let datasetId = this.item.dataMapping.datasetId;
            this.getUpdateReportDs({id: datasetId})
                .then(res => {
                    let time = JSON.parse(res.data.config).time;
                    this.config = JSON.parse(res.data.config).config;
                    this.timeVal(time.unit);
                    this.tableInit();
                })
        },
        timeVal (dateValue) {
            switch (dateValue) {
                case "day":
                    this.timeUnitSign = "天";
                    break;
                case "week":
                    this.timeUnitSign = "周";
                    break;
                case "month":
                    this.timeUnitSign = "月";
                    break;
            }
        },
        tableInit () {
            let current = this.dataApkdb[this.item.dataMapping.datasetId];
            let gridHeight = this.item.position.h * this.rowHeight,
                gridWidth = this.item.position.w * this.rowHeight,
                marginHeight = (this.item.position.h-1) * 10,
                marginWidth = (this.item.position.w + 1) * 10;
            this.tableWidth = (gridWidth + marginWidth + 55);
            if (this.item.remark) {
                this.tableHeight = (gridHeight + marginHeight - 60);
            } else {
                this.tableHeight = (gridHeight + marginHeight - 40);
            }
            if (current) {
                this.resData = current;
                this.updateTable();
            }
        },
        loadChildrenData (item, callback) {
            setTimeout(() => {
                let rowId = item.id;
                let children = [];
                let subRowsNum = this.resData.rows[rowId].sub_rows.length;
                for ( let j = 0; j < subRowsNum; j++ ) {
                    let subrowData = {
                        id: rowId + "" + j,
                        by_value: this.resData.rows[rowId].sub_rows[j].by_value,
                        total_people: this.resData.rows[rowId].sub_rows[j].total_people,
                        cellClassName: {}
                    }
                    let subRowCellsNum = this.resData.rows[rowId].sub_rows[j].cells.length;
                    for( let k = 0; k < subRowCellsNum; k++ ) {
                        let percent = this.resData.rows[rowId].sub_rows[j].cells[k].percent
                        // subrowData["cell"+k] = percent+'%<br/>'+this.resData.rows[rowId].sub_rows[j].cells[k].people+"人";
                        subrowData["cell"+k] = {
                            p: percent,
                            people: this.resData.rows[rowId].sub_rows[j].cells[k].people,
                        }
                        if ( percent > 0 && percent <= 20 ) {
                            subrowData.cellClassName["cell"+k] = 'cell-ls-20';
                        }else if ( percent > 20 && percent <= 40 ) {
                            subrowData.cellClassName["cell"+k] = 'cell-ls-40';
                        }else if ( percent > 40 && percent <= 60 ) {
                            subrowData.cellClassName["cell"+k] = 'cell-ls-60';
                        }else if ( percent > 60 && percent <= 80 ) {
                            subrowData.cellClassName["cell"+k] = 'cell-ls-80';
                        }else if ( percent > 80 && percent <= 100 ) {
                            subrowData.cellClassName["cell"+k] = 'cell-ls-100';
                        }
                    }
                    children.push(subrowData)
                }

                callback(children);
            }, 1000);
        },
        updateTable () {
            this.columns = [];
            let tableData = [];
            if (!this.resData.rows) {
                return
            }
            let columnNum = this.resData.rows[0].cells.length;
            if ( this.resData.rows[0].by_value === "$ALL" ) {
                let childrenRows = this.resData.rows.length - 1;
                this.columns.push({
                        title: "总体",
                        key: "by_value",
                        tree: true,
                        width: 200
                    },
                    {
                        title: "总人数",
                        key: "total_people",
                        width: 100
                    })
                let totalData = {
                    id: 1,
                    by_value: "总体",
                    total_people: this.resData.rows[0].total_people,
                    children: [],
                    cellClassName: {},
                }
                for ( let i = 0; i < columnNum; i++ ) {
                    let cellHead = {
                        "title": "第" + i + this.timeUnitSign,
                        "key": "cell" + i,
                        "width": 100,
                        "render": function (h, param) {

                            let key = param.column.key;
                            let cellData = param.row[key]
                            return h(
                                'div', 
                                {
                                    props: {},
                                },
                                [
                                    h('p', cellData.p + "%"),
                                    h('p', cellData.people + "人")
                                ]
                            );
                        },
                    }
                    this.columns.push(cellHead);
                    let percent = this.resData.rows[0].cells[i].percent;
                    totalData["cell"+i] = {
                        p: percent,
                        people: this.resData.rows[0].cells[i].people,
                    }
                    if ( percent > 0 && percent <= 20 ) {
                        totalData.cellClassName["cell"+i] = 'cell-ls-20';
                    } else if ( percent > 20 && percent <= 40 ) {
                        totalData.cellClassName["cell"+i] = 'cell-ls-40';
                    } else if ( percent > 40 && percent <= 60) {
                        totalData.cellClassName["cell"+i] = 'cell-ls-60';
                    } else if ( percent > 60 && percent <= 80) {
                        totalData.cellClassName["cell"+i] = 'cell-ls-80';
                    } else if ( percent > 80 && percent <= 100) {
                        totalData.cellClassName["cell"+i] = 'cell-ls-100';
                    }
                }

                for ( let i = 0; i < childrenRows; i++ ) {
                    let childrenData = {
                        id: 0 + "" + i,
                        by_value: this.resData.rows[i+1].by_value,
                        total_people: this.resData.rows[i+1].total_people,
                        cellClassName: {},
                    }
                    let cellsNum = this.resData.rows[i+1].cells.length;
                    for ( let j = 0; j < cellsNum; j++ ) {
                        let percent = this.resData.rows[i+1].cells[j].percent;
                        childrenData["cell"+j] = {
                            p: percent,
                            people: this.resData.rows[i+1].cells[j].people,
                        }
                        if ( percent > 0 && percent <= 20 ) {
                            childrenData.cellClassName["cell"+j] = 'cell-ls-20';
                        } else if ( percent > 20 && percent <= 40 ) {
                            childrenData.cellClassName["cell"+j] = 'cell-ls-40';
                        } else if ( percent > 40 && percent <= 60 ) {
                            childrenData.cellClassName["cell"+j] = 'cell-ls-60';
                        } else if ( percent > 60 && percent <= 80 ) {
                            childrenData.cellClassName["cell"+j] = 'cell-ls-80';
                        } else if ( percent > 80 && percent <= 100 ) {
                            childrenData.cellClassName["cell"+j] = 'cell-ls-100';
                        }
                    }
                    totalData.children.push(childrenData);
                }
                tableData.push(totalData);
                this.tableVal = tableData;

            }else {
                this.columns.push(
                    {
                        title: this.config.by_field[0],
                        key: "by_value",
                        tree: true,
                        width: 200
                    },
                    {
                        title: "总人数",
                        key: "total_people",
                        width: 100
                    }
                );
                for ( let i = 0; i < columnNum; i++ ) {
                    let cellHead = {
                        "title": "第" + i + this.timeUnitSign,
                        "key": "cell" + i,
                        "width": 100,
                        "render": function (h, param) {
                            let key = param.column.key;
                            let cellData = param.row[key]
                            if ( !cellData ) {
                                return h (
                                    'div',
                                    {
                                        props:{}
                                    },
                                    [
                                        h('p', ''), 
                                        h('p', '')
                                    ]
                                );
                            }
                            return h(
                                'div', 
                                {
                                    props: {},
                                },
                                [
                                    h('p', cellData.p + "%"),
                                    h('p', cellData.people + "人")
                                ]
                            );
                        },
                    }
                    this.columns.push(cellHead)
                }
                let totalData = []
                let rowsNum = this.resData.rows.length;

                for ( let i = 0; i < rowsNum; i++ ){
                    let rowData = {
                        id: i,
                        by_value: this.resData.rows[i].by_value,
                        total_people: this.resData.rows[i].total_people+"人",
                        children: [],
                        _loading: false,
                        cellClassName: {},
                    }
                    let rowCellsNum = this.resData.rows[i].cells.length;
                    for( let m = 0; m < rowCellsNum; m++ ) {
                        let percent = this.resData.rows[i].cells[m].percent
                        rowData["cell"+m] = {
                            p: percent,
                            people: this.resData.rows[i].cells[m].people,
                        }
                        if ( percent > 0 && percent <= 20 ) {
                            rowData.cellClassName["cell"+m] = 'cell-ls-20';
                        }else if ( percent > 20 && percent <= 40 ) {
                            rowData.cellClassName["cell"+m] = 'cell-ls-40';
                        }else if ( percent > 40 && percent <= 60 ) {
                            rowData.cellClassName["cell"+m] = 'cell-ls-60';
                        }else if ( percent > 60 && percent <= 80 ) {
                            rowData.cellClassName["cell"+m] = 'cell-ls-80';
                        }else if ( percent > 80 && percent <= 100 ) {
                            rowData.cellClassName["cell"+m] = 'cell-ls-100';
                        }
                    }
                    totalData.push(rowData);
                }
                this.tableVal = totalData
            }
        }
    },
    created () {
        this.dataconfig();
    },
    mounted () {
        this.tableInit();
        elementResize.on(document.getElementById('retention'), () => {
            let gridHeight = this.item.position.h * this.rowHeight,
                gridWidth = this.item.position.w * this.rowHeight,
                marginHeight = (this.item.position.h-1) * 10,
                marginWidth = (this.item.position.w + 1) * 10
            this.tableWidth = (gridWidth + marginWidth + 55);
            if (this.item.remark) {
                this.tableHeight = (gridHeight + marginHeight - 70);
            } else {
                this.tableHeight = (gridHeight + marginHeight - 50);
            }
        })
    }
}
</script>

<style scoped>
.retention {
    height: 100%;
    /* height: calc(100% - 30px); */
    width: 100%;
    padding: 0px 5px;
}
.retention >>> td.table-color1.table-color1 {
    background-color: #6699ff !important;
}
.retention >>> td.table-color2.table-color2 {
    background-color: #66ccff !important;
}
.retention >>> td.table-color3.table-color3 {
    background-color: #66ffff !important;
}
</style>
<style>
.ivu-table .cell-ls-20 {
    background-color: #d0ebff;;
    color: #000;

}
.ivu-table .cell-ls-40 {
    background-color: #add1ed;
    color: #000;

}

.ivu-table .cell-ls-60 {
    background-color: #609ccb;
    color: #000;

}
.ivu-table .cell-ls-80 {
    background-color: #2885cf;
    color: #fff;

}
.ivu-table .cell-ls-100 {
    background-color: #0d60d0;
    color: #fff;
}

.ivu-table th {
    background-color: #fff;
}

.ant-spin-nested-loading {
  height: 100%;
}

.ant-spin-nested-loading>>>.ant-spin-container {
  height: 100%;
}
</style>